<template>
  <div>
    <el-table
        :data="list"
        style="width: 100%">
      <el-table-column
          prop="courseId"
          label="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="courseTitle"
          label="标题"
          width="180">
      </el-table-column>
      <el-table-column
          prop="isFree"
          label="是否免费">
        <template slot-scope="scope">
          <el-tag
              v-if="scope.row.isFree == 1"
              type="success"
              effect="dark">
            免费
          </el-tag>
          <el-tag
              v-else
              type="danger"
              effect="dark">
            不免费
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="coursePrice"
          label="课程价格">
      </el-table-column>
      <el-table-column
          prop="createdTime"
          label="创时间">
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size='6'
        @current-change="onCurrentChange"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "CourseList",
  data() {
    return {
      list: [],
      total: 0
    }
  },
  mounted() {
    // 请求接口，获取数据
    // 默认是json传参
    // request.post("/weChat/applet/course/list/type?pageNum=1&pageSize=6",{
    //   type:"free"
    // }).then(res=>{
    //   console.log(res)
    // });

    // const formData = new FormData();
    // // 第一个参数就是key，第二个参数就是value
    // formData.append("type", "free");
    // request.post("/weChat/applet/course/list/type?pageNum=1&pageSize=6",formData).then(res=>{
    //   console.log(res)
    // });

    const params = new URLSearchParams();
    params.append("type", "free")
    request.post("/weChat/applet/course/list/type?pageNum=1&pageSize=6", params).then(res => {
      // this.list = res.data.rows.map(item => {
      //   return {
      //     ...item,
      //     isFree: item.isFree == 1 ? '免费' : '不免费'
      //   }
      // })

      // this.list = res.data.rows.map(item => ({
      //   ...item,
      //   isFree: item.isFree == 1 ? '免费' : '不免费'
      // }));
      this.list = res.data.rows
      this.total = res.data.total
    });
  },
  methods: {
    onCurrentChange(currentPage) {
      console.log(currentPage)
      const params = new URLSearchParams();
      params.append("type", "free")
      request.post(`/weChat/applet/course/list/type?pageNum=${currentPage}&pageSize=6`, params).then(res => {
      // request.post("/weChat/applet/course/list/type?pageNum="+currentPage+"&pageSize=6", params).then(res => {
        this.list = res.data.rows
        this.total = res.data.total
      });
    }
  }
}
</script>

<style scoped>

</style>
